import React, {Component} from 'react';

class Index extends Component {
    //完成数据的初始化，其接受两个参数：props和context 当想在函数内部使用在这两个参数时需要使用super传入这两个参数
    //注意：只要使用了constructor就必须写super，否则会导致this指向错误
    constructor(props,context) {
        super(props,context);
        this.state={
            name:'123456'
        }

    }

    render() {
        return (
            <div>
                {this.state.name}
                <button onClick={()=>{
                    this.setState({
                        name:'456789'
                    })
                }}>改变</button>
            </div>
        );
    }
    //componentWillMount使用的一般情况下比较少，他更多的是在服务端渲染的时候使用，代表组件经历了constructor之后，但是还没有渲染Dom时

    componentWillMount() {
        console.log("componentWillMount")
    }
    //组件第一次渲染完成，此时的Dom节点已经生成，可以在此处调用ajax请求，返回SetState之后组件会重新渲染
    componentDidMount() {
        console.log('componentDidMount')
        this.setState({
            name:"name"
        })
    }
}

export default Index;
